<template>
  <layout :showBg="false">
    <template #header>
      <view class="header flex flex-bt flex-a">
        <view class="header-bt">
          <image
            src="../../../assets/images/icons/arrow-right.png"
            class="arrow-left back"
            style="width:48rpx;height: 48rpx;opacity: 0.9;"
            mode="scaleToFill"
            @click="back"
        />
        </view>
        <text class="title bold">浏览记录</text>
        <view @click="showFilter = true" class="filter header-bt flex flex-a-c">
          <text class="c-60 fs-24">筛选</text>
          <image
            src="../../../assets/images/icons/filter.png"
            style="width: 48rpx; height: 48rpx; margin-left: 16rpx"
            mode="scaleToFill"
          />
        </view>
      </view>
    </template>
    <view class="content">
      <!-- 内容 -->
      <scroll-view class="scroll-box" scroll-y @scrolltolower="onScroll">
        <view class="list-box flex" v-if="list.length">
          <Card
            v-for="item in list"
            :key="item.vid"
            class="card"
            :info="item"
          ></Card>
        </view>
        <empty v-if="!list.length && !loading" :pic="require('../../../assets/images/empty/normal.png')" />
      </scroll-view>
    </view>
    <FilterPopup
      @close="onClose"
      @confirm="onConfirm"
      @reset="onReset"
      :selecetdVal="selecetdVal"
      :origin="origin"
      :filters="collectFilters"
      :show="showFilter"
      :pathName="'vpath'"
    />
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import Card from "../../../compennts/drama/Card.vue";
import FilterPopup from "../../../compennts/filter/index.vue";
import empty from "../../../compennts/empty/index.vue";

import { collectFilters } from "../../../assets/utils/constance";
import { getCollections } from "../../../api/mine/index";
import { formatDate, getDayBegin, getDayEnd } from "../../../assets/utils/date";
import {copyObj} from '../../../assets/utils/index'

export default {
  components: {
    layout,
    pageHead,
    Card,
    FilterPopup,
    empty,
  },
  data() {
    return {
      collectFilters: collectFilters.options,
      origin: collectFilters.default('vpath'),
      selecetdVal: collectFilters.default('vpath'),
      showFilter: false,
      page: {
        pageNum: 1,
        pageSize: 20,
      },
      list: [],
      loading: false,
    };
  },
  watch: {
    showFilter(val) {
      this.showFilter = val;
    },
    loading(val) {
      if (val) {
        uni.showLoading({
          mask: true,
        });
      } else {
        uni.hideLoading();
      }
    },
  },
  onLoad() {},
  onShow() {
    this.onGetCollections();
  },

  methods: {
    back() {
      uni.navigateBack();
    },
    onConfirm(val) {
      this.origin = copyObj(val);
      this.selecetdVal = copyObj(val);
      this.showFilter = false;
      this.pageNum = 1
      this.onGetCollections();
    },
    onReset() {
      this.selecetdVal = collectFilters.default('vpath');
    },
    onClose(val) {
      this.showFilter = false;
      this.selecetdVal = copyObj(this.origin)
    },
    onScroll() {
      this.page.pageNum++;
      this.onGetCollections(true);
    },
    onGetCollections(isLoadMore) {
      this.loading = true;
      let p = {};
      let path = "";
      for (let i in this.selecetdVal) {
        p[this.selecetdVal[i].key] = this.selecetdVal[i].value;
        if (this.selecetdVal[i].path) path = this.selecetdVal[i].path;
      }
      p.onlineTimeStart = null;
      p.onlineTimeEnd = null;
      if (p.onlineTime !== null) {
        const daymap = [0, 3, 7];
        p.onlineTimeStart = formatDate(getDayBegin(daymap[p.onlineTime]));
        p.onlineTimeEnd = formatDate(getDayEnd());
      }
      getCollections(path, {
        ...this.page,
        ...p,
      })
        .then((res) => {
          this.list = isLoadMore
            ? [...this.list, ...(res?.rows || [])]
            : res?.rows || [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.header {
  width: 100%;
  flex: 1;
  padding: 0 32rpx 16rpx 32rpx;
  .header-bt {
    width: 130rpx;
  }
}
.content {
  height: 100%;
  padding: 32rpx;
  background: #f7f8ff;
  .scroll-box {
    height: 100%;
    width: 100%;
    .list-box {
      flex-wrap: wrap;
      .card {
        width: calc((100% - 32rpx) / 3);
        margin-bottom: 24rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
